/**
 * Mask 
 * 
 * @author Gill Gong
 */
 import React from "react"
 import { View } from "react-native"

 class Mask extends React.Component {

  render() {
    let { children, maskStyle, ...otherProps } = this.props

    let innerMaskStyle = _.extend({
      backgroundColor: "#000",
      position: "absolute", 
      height: "100%",
      width: "100%",
      opacity: .4,
      left: 0,
      top: 0,
    }, maskStyle || {})

    return (
      <View style={{ 
        position: "absolute", 
        height: "100%", 
        width: "100%", 
        left: 0,
        top: 0
      }} { ...otherProps }>
        <View style={ innerMaskStyle } />
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center"}}>
          { children }
        </View>
      </View>
    )
  }
 }

 export default Mask
